<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${ctxPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="${ctxPath}/material/css/main.css">
<link rel="stylesheet" href="${ctxPath}/material/css/normalize.css">
<link rel="stylesheet" href="${ctxPath}/material/css/htmleaf-demo.css">
<meta charset="UTF-8">
<title>登录界面</title>
<style>
#register{
	position: absolute;
	left: 50%;
	top: 50%;
	padding: 0 20px;
	width: 400px;
	/* 	height: 300px; */
	margin-top: -180px;
	margin-left: -200px;
	text-align: center;
	-webkit-backdrop-filter: blur(15px);
	background: rgba(255, 255, 255, 0.2);
	color:black;
	padding-bottom:10px;
}
#intro {
	position: absolute;
	left: 50%;
	top: 50%;
	padding: 0 20px;
	width: 400px;
	/* 	height: 300px; */
	margin-top: -180px;
	margin-left: -200px;
	text-align: center;
	-webkit-backdrop-filter: blur(15px);
	background: rgba(255, 255, 255, 0.2);
	color:black;
	padding-bottom:10px;
}
.btn {
	display: inline-block;
	padding: 10px 30px;
	border: 2px solid #fff;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.btn:hover {
	color: #005544;
	border-color: #005544;
}

.hidden{
	display:none;
}

</style>
</head>
<body>
		<div id="intro">
			<h1 >登录界面</h1>
			<div class="row">
				<label class="col-sm-3 control-label">账号</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="请输入账号" id="id"
						name="id">
				</div>
			</div>
			<br />
			<div class="row">
				<label class="col-sm-3 control-label">密码</label>
				<div class="col-sm-9">
					<input type="password" class="form-control" placeholder="请输入密码"
						id="password" name="password">
				</div>
			</div>
			<br />
			<div class="row">
				<label class="col-sm-3 control-label">验证码</label>
				<div class="col-sm-5">
					<input type="text" id="code" placeholder="请输入验证码" name="code"
						class="form-control" />
				</div>
				<div class="col-sm-4">
					<img id="imgObj" alt="验证码" src=""
						style="height: 34px; width: 100px"
						onclick="javascript:this.src='${ctxPath}/account/code?tm='+Math.random()" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="checkbox">
						<label> <input type="checkbox" id="saveLoginStatus" />
							记住账号
						</label>
					</div>
				</div>
			</div> 
			<br />
			<div class="row">
				<div class=" col-sm-4">
					<a href="#" style="color:black;font-size:20px" id="btn-register">注册</a>
				</div>
				<div class="col-sm-offset-4 col-sm-4">
					<button onclick="checkLogin()" class="btn btn-primary">登录</button>
				</div>
			</div>
		</div>
		
		<div id="register" class="hidden">
		<form id="register-form" >
			<h1 >注册用户</h1>
			<div class="row">
				<label class="col-sm-3 control-label">昵称</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="请输入昵称" 
						name="username">
				</div>
			</div>
			<br>
			<div class="row">
				<label class="col-sm-3 control-label">密码</label>
				<div class="col-sm-9">
					<input type="password" class="form-control" placeholder="请输入密码" 
						name="password">
				</div>
			</div>
			<br>
			<div class="row">
				<label class="col-sm-3 control-label">重复密码</label>
				<div class="col-sm-9">
					<input type="password" class="form-control" placeholder="请输入密码" 
						name="rpassword">
				</div>
			</div>
			<br>
		</form>
			<div class="row">
				<div class=" col-sm-4">
					<button  class="btn btn-primary" id="btn-register-return">返回</button>
				</div>
				<div class="col-sm-offset-4 col-sm-4">
					<button  class="btn btn-primary" id="btn-register-submit">注册</button>
				</div>
			</div>
		</div>
</body>

<script src="${ctxPath}/resources/js/jquery-2.2.4.min.js"></script>
<script src="${ctxPath}/resources/js/bootstrap.min.js"></script>
<script src="${ctxPath}/resources/js/jquery.blockUI.js"></script>
<script src='${ctxPath}/material/js/jquery.gradientify.min.js'></script>
<script src="${ctxPath}/resources/js/jquery.cookie.js"></script>
<script type="text/javascript">
	$(function() {
			$('#btn-register').click(function(){
				$('#register').removeClass('hidden');
				$('#intro').addClass('hidden');
			});
			$('#btn-register-return').click(function(){
				$('#intro').removeClass('hidden');
				$('#register').addClass('hidden');
			});
			
			$('#btn-register-submit').click(function(){
				var username = $('#register-form input[name=username]').val();
				var password = $('#register-form input[name=password]').val();
				var rpassword = $('#register-form input[name=rpassword]').val();
				if(username==''){
					showMsg('昵称不能为空');		
					return;
				}
				if(password==''){
					showMsg('密码不能为空');		
					return;
				}
				if(password==''){
					showMsg('重复密码不能为空');		
					return;
				}
				if(username.length>20){
					showMsg('昵称长度请在20位之内');		
					return;
				}
				if(password.length>15||password.length<6){
					showMsg('密码长度请在6-15位之内');		
					return;
				}
				if(password!=rpassword){
					showMsg('两次密码不一致');		
					return;
				}
				 $.post('${ctxPath}/account/addAccount', $("#register-form").serialize(), function(res){
		        	if(res=='fail'){
		        		showMsg('注册失败,请重试');		        		
		        	}else{
		        		showMsg2('注册成功,请牢记你的账号'+res);
		        		$('#id').val(res);
		        		$('#intro').removeClass('hidden');
						$('#register').addClass('hidden');
		        	}
		        });
			});
			
			
	     $("body").gradientify({
             gradients: [
                 { start: [49,76,172], stop: [242,159,191] },
                 { start: [255,103,69], stop: [240,154,241] },
                 { start: [33,229,241], stop: [235,236,117] }
             ]
	     ,fps:10
         });
		changeCode();
		var id = $.cookie('LOGINSTATUS');
		if (id != null) {
			$('#id').val(id);
// 			$.ajax({
// 				url : "${ctxPath}/account/cookieLogin",
// 				data : {},
// 				type : 'POST',
// 				dataType : 'text',
// 				success : function(data) {
// 					if (data == 'SUCCESS') {
// 						window.location.href = "${ctxPath}/direct/directMain";
// 					}
// 				}
// 			});
		}
	});

	function showMsg(msg) {
		$.blockUI({
			message : msg,
			fadeIn : 300,
			fadeOut : 500,
			timeout : 800,
			css : {
				border : 'none',
				fontSize : '16px',
				borderRadius : '5px',
				padding : '5px',
				fontWeight : 'bold'
			}
		});
	}
	
	function showMsg2(msg) {
		$.blockUI({
			message : msg,
			fadeIn : 300,
			fadeOut : 500,
			timeout : 5000,
			css : {
				border : 'none',
				fontSize : '16px',
				borderRadius : '5px',
				padding : '5px',
				fontWeight : 'bold'
			}
		});
	}

	function checkLogin() {
		var bool = false;
		if ($("#saveLoginStatus").is(':checked')) {
			bool = true;
		}
		$.ajax({
			url : "${ctxPath}/account/checkLogin",
			data : {
				id : $('#id').val(),
				password : $('#password').val(),
				code : $('#code').val(),
				saveLoginStatus : bool
			},
			type : 'POST',
			dataType : 'text',
			success : function(data) {
				if (data == "SUCCESS") {
					$.ajax({
						url : "${addSessionAddr}",
						data : {
							id : $('#id').val(),
						},
						type : 'POST',
						dataType : 'text',
						async:false
					});
					showMsg('登录成功');
					//延迟进入主界面
					window.setTimeout(
							"window.location='${ctxPath}/direct/directMain'",
							500);
				} else if (data == "NOEXIST") {
					showMsg('账号不存在');
					changeCode();
				} else if (data == "PASSWORDERROR") {
					showMsg('密码错误');
					changeCode();
				} else if (data == "CODEERROR") {
					showMsg('验证码错误');
					changeCode();
				} else if (data == "SESSIONEXPIRED") {
					showMsg('验证码错误');
					changeCode();
				} else {
					showMsg('未知错误');
					changeCode();
				}
			}
		});
	}

	function changeCode() {
		$('#imgObj').attr('src', '${ctxPath}/account/code?tm=' + Math.random());
	}
</script>
</html>